<?php
 $this->headScript()
     ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery-1.js')
    ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_003.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_005.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_002.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_004.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/drag-drop-custom.js')
   ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery.blockUI.js'); 
 
   $this->headLink()
    ->appendStylesheet($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/styles/custom.css')
    ->appendStylesheet($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/styles/demos.css');
   
   ?>
      <script>
	$(function() {
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li, table" ).disableSelection();
	});
	</script>
        
<h2>
  <?php echo $this->translate('Form Creator Plugin') ?>
</h2>
<?php if( count($this->navigation) ): ?>
  <div class='tabs'>
    <?php
      // Render the menu
      //->setUlClass()
      echo $this->navigation()->menu()->setContainer($this->navigation)->render()
    ?>
  </div>
<?php endif; ?>

 <!-- BEGIN CONTENT -->
            <div id="global_content">
                <!-- LEFT MENU -->
                <ul class="tablist">
                    <li id="tab_title">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/image.png"/> Title
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">New Title</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Title</label>
                                    <input type="text" value="New Title" class="widefat val_title" name="title">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_paragraph">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/para.png"/> Paragraph
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">New Paragraph</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Paragraph</label>
                                    <textarea cols="10" rows="4" class="widefat  val_title" name="description" >New Paragraph</textarea>
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_email">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/email.png"/> Email
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Email</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Email" class="widefat  val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_signlelinetext">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/singleline.png"/> Single Line Text
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Single Line Text</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Single Line Text" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_multilinetext">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/multiline.png"/> Multi-line Text
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Multi-lines Text</td><td><textarea class="boxhidden"></textarea></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Multi-lines Text" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Rows</label>
                                    <input type="text" value="" class="widefat" name="rows">
                                </p>
                                <p>
                                    <label for="">Cols</label>
                                    <input type="text" value="" class="widefat" name="cols">
                                </p>  
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_checkbox">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/checkbox.png"/> Checkboxes
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Checkboxes</td><td><input type="checkbox"> &nbsp; <input type="checkbox"></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Checkboxes" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                 <p>
                                    <label for="">List Items</label>
                                    <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                                    <table class="checkboxlist"></table>
                                 </p>
                                
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_radio">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/radio.png"/> Radio Buttons
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Radio Buttons</td><td><input type="radio"> &nbsp;<input type="radio"></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Radio Buttons" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                 <p>
                                    <label for="">List Items</label>
                                    <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                                    <table class="checkboxlist"></table>
                                 </p>
                                
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_dropdown">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/select.png"/> Drop-down List
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Drop-down List</td><td><select style="width: 200px !important;" disabled><option>Select</option></select></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Drop-down List" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                 <p>
                                    <label for="">List Items</label>
                                    <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                                    <table class="checkboxlist"></table>
                                 </p>
                                
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_multidropdow">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/multiselect.png"/> Multi Select Dropdow
                        <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Multi Select Dropdow</td><td><select style="width: 200px !important;" disabled><option>Select</option></select></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Multi Select Dropdow" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Width</label>
                                    <input type="text" value="" class="widefat" name="width">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                 <p>
                                    <label for="">List Items</label>
                                    <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                                    <table class="checkboxlist"></table>
                                 </p>
                                
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_upload">
                        <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/upload.png"/> Upload
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Upload</td><td><input type="file" disabled></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Upload" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_image">
                         <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/image.png"/> Image
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Image</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Image" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_date"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/date.png"/> Date
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Date</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Email" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
<!--                    <li id="tab_time"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/time.png"/> Time
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Time</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Time" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>-->
                    <li id="tab_captcha"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/captcha.png"/> Captcha
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Captcha</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Captcha" class="widefat val_title" name="title">
                                </p>
                                <p>
                                    <label for="">Required <span class="red">*</span></label>
                                    <input type="checkbox" value="1" class="widefat" name="required">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="tab_submit"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/submit.png"/> Submit Button
                         <div class="tab_element">
                            <div class="widget-content">
                                <table><tr><td class="tab_title">Submit Button</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                                <div class="expand">
                                <p>
                                    <label for="">Label</label>
                                    <input type="text" value="Submit Button" class="widefat val_title" name="title">
                                </p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- MAIN AREA -->
                <div class="settings">
                    <div class="headerarea"><a href="javascript:void(0)" onclick="jQuery('#sortable').empty()">Clear Form</a></div>
                    <ul id="sortable" class="form-elements" ></ul>
                     <form id="form_settings">
                        <div class="footerarea">
                            <p>
                                <label for=""><?php echo $this->translate("Form Title"); ?></label>
                                <input type="text" value="" class="widefat"  name="title">
                            </p>
                            <p>
                                <label for=""><?php echo $this->translate("Form Url");?></label>
                                <input type="text" id="form_url" value="" class="widefat"  name="url">
                            </p>
                            <p>
                                <label for=""><?php echo $this->translate("Form Email");?></label>
                                <input type="text" id="form_email" value="" class="widefat"  name="email" size="10">
                            </p>
                            <p>
                                <label for=""><?php echo $this->translate("Successful Message");?></label>								
                                <input type="text" value="" class="widefat"  name="success_msg">
                            </p>
                            <p>
                                <label for=""><?php echo $this->translate("Status");?></label>
                                <select name="status">
                                    <option value="1"><?php echo $this->translate("Enable");?></option>
                                    <option value="0"><?php echo $this->translate("Disable");?></option>
                                </select>
                            </p>
                            <div style="clear: both;"></div>
                        </div>
                    </form>
                    <div class="form-wrapper" id="submit-wrapper" style="display: none;">
                       <button type="submit" onclick="submitform(this)">Save Changes</button>
                    </div>
                </div>
                
                <script type="text/javascript">
                    function check_empty_form(){
                             if(!jQuery('#sortable li').length)  
                                 jQuery('#submit-wrapper').hide(); 
                    }

                    // Custom drop actions for <div id="dropBox">
                    function dropItems(idOfDraggedItem,targetId,x,y)
                    {
                            key = Math.floor((Math.random()*100)+1);
                            jQuery('#sortable').append('<li id="form_' + idOfDraggedItem + '_' + key + '"><form id="' + key + '_id">' + jQuery('#' + idOfDraggedItem + ' .tab_element').html() + '</form></li>');
                            // check form have child ? 
                            jQuery('#submit-wrapper').show(); 
                    }


                    var dragDropObj = new DHTMLgoodies_dragDrop();
                    jQuery('.tablist li').each(function(){
                        eleid = jQuery(this).attr('id');
                        dragDropObj.addSource(eleid,true);
                    });

                    dragDropObj.addTarget('sortable','dropItems');	// Set <div id="dropBox"> as a drop target. Call function dropItems on drop
                    dragDropObj.init();

                 
                    
                    function showedit(eleID){ 
                        if(jQuery('#'  + eleID + ' .edit').hasClass('open')){
                            jQuery('#' + eleID + ' .edit').removeClass('open');
                            jQuery('#' + eleID + ' .edit').text('Edit');
                            jQuery('#' + eleID + ' .expand').hide(); 
                            jQuery('#' + eleID + ' form .tab_title').text(jQuery('#' + eleID + ' form .val_title').val());


                        }else{  
                            jQuery('#' + eleID + ' .edit').addClass('open');
                            jQuery('#' + eleID + ' .edit').text('Hide');
                            jQuery('#' + eleID + ' .expand').show(0,function(){ jQuery('#' + eleID + ' .widefat').click(function(){ jQuery(this).focus().select();});}); 
                        }
                        
                    }
                    
                    function checkValidate(){
                        if(jQuery('#form_url').val() == ''){
                            alert('Form Url can not be empty !');
                            return false;
                        }
						
						if(jQuery('#form_email').val() == ''){
                            alert('Please enter valid email!');
                            return false;
                        }
                        //var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                        //if(!regex.test(jQuery('#form_email').val() )){
                        //   alert('Please enter valid email !');
                        //    return false;
                        //}
                        return true; 
                    }
                    
                    function submitform(){
                    
                        // check validate 
                        if(!checkValidate())  
                            return false;
                        
                        $data  = new Array();
                        $i = 0 ; 
                        
                        jQuery('#sortable li').each(function(){
                            $rootID      = jQuery(this).attr('id');
                            $input       = jQuery('#' + $rootID + ' form').serializeArray();
                            $data[$i++]  = new Array($rootID,$input) ; 
                        });
                        
                         jQuery.blockUI({css: { 
                            border: 'none', 
                            padding: '15px', 
                            backgroundColor: '#000', 
                            '-webkit-border-radius': '10px', 
                            '-moz-border-radius': '10px', 
                            opacity: .5, 
                            color: '#fff' 
                         }});

                        jQuery.post('<?php echo $this->layout()->staticBaseUrl ?>admin/frmcreator/manage/add-form',
                                    {form_data : $data, form_settings : jQuery('#form_settings').serialize()},
                                    function(){ 
                                        document.location.href = '<?php echo $this->layout()->staticBaseUrl ?>admin/frmcreator/manage';
//                                        $.unblockUI();
                                    }); 
                    }
                    
                    function add_checkbox(rootID){
                        var items = prompt("Enter items separated by commas");
                        array_items = items.split(',');
                        for (var i = 0; i < array_items.length; i++)
                        {   key = Math.floor((Math.random()*1000)+1);
                            jQuery('#' + rootID + ' .checkboxlist').append('<tr id="checkbox_' + key + '"><td><input type="text" name="option[]" value="' + array_items[i] + '"></td><td><a href="javascript:void(0);" onclick="remove_this(\'checkbox\',\'' + key + '\')">Remove</a></td></tr>'); 

                        }
                    }
                    
                    function remove_this(key, item_id){
                        jQuery('#' + key + "_" +  item_id).remove() ;  
                       
                    }
                    
                </script>

            </div>
